<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'policy-chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption({
        title: {
          text: '气候变化相关政策及标准',
          x: 'center',
          top: 10,
          textStyle: {
            color: 'white',
            fontStyle: 'italic',
            fontSize: 30,
            textBorderColor: '#ffffff',
            textBorderWidth: 0.8
          }
        },
        grid: {
          left: '-5%',
          top: '5%',
          bottom: '2%'
        },
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        //   backgroundColor: '#2a333d',
        legend: {
          left: 'right',
          top: 'bottom',
          orient: 'vertical',
          selectedMode: 'single',
          textStyle: {
            color: '#fff',
            fontSize: 18
          },
          data: [
            {
              name: '政策规划'
            },
            {
              name: '相关标准'
            },
            {
              name: '法律法规'
            }
          ]
        },
        tooltip: {
          enterable: true,
          textStyle: {
            color: '#fff',
            decoration: 'none'
          }
        },
        series: [
          // 政策规划
          {
            name: '政策规划',
            type: 'graph',
            draggable: false,
            coordinateSystem: 'cartesian2d',
            itemStyle: {
              color: '#20b2aa'
            },
            label: {
              show: true,
              position: 'right',
              fontSize: 15
            },
            data: [
              {
                name: '2023年',
                value: [250, 850],
                symbolSize: 100,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《2021、2022年度全国碳排放权交易配额总量设定与分配实施方案(发电行业)》',
                value: [650, 850],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '印发时间：' +
                      '2023年3月15日' +
                      '<br>印发部门：' +
                      '生态环境部' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              // 2022年
              {
                name: '2022年',
                value: [250, 650],
                symbolSize: 80,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《强化应对气候变化行动—中国国家自主贡献》',
                value: [650, 700],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '印发时间：' +
                      '2022年6月' +
                      '<br>印发部门：国务院' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '《中国应对气候变化的政策与行动2022年度报告》',
                value: [650, 650],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '印发时间：' +
                      '2022年11月' +
                      '<br>印发部门：生态环境部' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '《中国气象局加强气候变化工作方案》',
                value: [650, 550],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2021年4月' +
                      '<br>发布单位：中国气象局' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2021年',
                value: [250, 500],
                symbolSize: 60,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《2030年前碳达峰行动方案》',
                value: [650, 500],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布时间：' +
                      '2021年1月' +
                      '<br>发布机关：国务院办公厅' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2019年',
                value: [250, 350],
                symbolSize: 40,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《大型活动碳中和实施指南（试行）》',
                value: [650, 400],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2019年6月' +
                      '<br>发布单位：应对气候变化与对外合作处' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '《2019年林业和草原应对气候变化政策与行动》',
                value: [650, 350],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2019年7月' +
                      '<br>发布单位：国家林业、草原局办公室' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '《“十三五”控制温室气体排放工作方案》',
                value: [650, 300],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2016年11月' +
                      '<br>发布单位：国务院' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2016年',
                value: [250, 200],
                symbolSize: 30,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《林业适应气候变化行动方案(2016-2020年)》',
                value: [650, 230],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2016年7月' +
                      '<br>发布单位：国家林业局' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '《林业应对气候变化“十三五”行动要点》',
                value: [650, 170],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2016年5月' +
                      '<br>发布单位：国务院' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '1905年',
                value: [250, 50],
                symbolSize: 30,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《国家适应气候变化战略2035》',
                value: [650, 50],
                symbolSize: 15,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布日期：' +
                      '2015年10月' +
                      '<br>发布单位：中华人民共和国国务院' +
                      '</div>'
                    return tipHtml
                  }
                }
              }
            ]
          },
          {
            name: '政策规划',
            type: 'effectScatter',
            coordinateSystem: 'cartesian2d',
            silent: true,
            rippleEffect: {
              brushType: 'stroke',
              scale: 1.7
            },
            itemStyle: {
              color: '#20b2aa'
            },
            data: [
              {
                value: [250, 850],
                symbolSize: 100
              },
              {
                value: [250, 650],
                symbolSize: 80
              },
              {
                value: [250, 500],
                symbolSize: 60
              },
              {
                value: [250, 350],
                symbolSize: 40
              },
              {
                value: [250, 200],
                symbolSize: 30
              },
              {
                value: [250, 50],
                symbolSize: 30
              }
            ]
          },
          {
            name: '政策规划',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              show: true,
              symbolSize: 10,
              symbol: 'triangle'
            },
            tooltip: {
              show: false
            },
            lineStyle: {
              curveness: 0.1,
              opacity: 0.2,
              color: new that.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#20b2aa'
                  },
                  {
                    offset: 1,
                    color: '#bee0ff'
                  }
                ],
                false
              ),
              width: 2
            },
            data: [
              {
                coords: [
                  [250, 850],
                  [250, 650]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 650],
                  [250, 500]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 500],
                  [250, 350]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 350],
                  [250, 200]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 200],
                  [250, 50]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 850],
                  [650, 850]
                ]
              },
              {
                coords: [
                  [250, 650],
                  [650, 700]
                ]
              },
              {
                coords: [
                  [250, 650],
                  [650, 650]
                ]
              },
              {
                coords: [
                  [250, 500],
                  [650, 550]
                ]
              },
              {
                coords: [
                  [250, 500],
                  [650, 550]
                ]
              },
              {
                coords: [
                  [250, 350],
                  [650, 400]
                ]
              },
              {
                coords: [
                  [250, 350],
                  [650, 350]
                ]
              },
              {
                coords: [
                  [250, 200],
                  [650, 300]
                ]
              },
              {
                coords: [
                  [250, 200],
                  [650, 230]
                ]
              },
              {
                coords: [
                  [250, 200],
                  [650, 170]
                ]
              },
              {
                coords: [
                  [250, 50],
                  [650, 50]
                ]
              }
            ]
          },
          // 相关标准
          {
            name: '相关标准',
            type: 'graph',
            draggable: false,
            coordinateSystem: 'cartesian2d',
            label: {
              show: true,
              position: 'right',
              fontSize: 20
            },
            itemStyle: {
              color: 'rgb(126, 230, 251, 0.9)'
            },
            data: [
              {
                name: '2023年',
                value: [250, 850],
                symbolSize: 80,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《碳达峰碳中和标准体系建设指南》',
                value: [650, 850],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布时间：' +
                      '2023年4月' +
                      '<br>制订单位：' +
                      '国家标准委 国家发展改革委 工业和信息化部等' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2022年',
                value: [250, 650],
                symbolSize: 60,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《城乡建设领域碳达峰实施方案》',
                value: [650, 650],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布时间：' +
                      '2022年6月' +
                      '<br>发布单位：' +
                      '住房和城乡建设部、国家发展改革委' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2021年',
                value: [250, 500],
                symbolSize: 40,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《适应气候变化 — 脆弱性、影响和风险评估指南》',
                value: [650, 500],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '发布时间：' +
                      '2021年9月' +
                      '<br>发布单位：' +
                      '中国标准化研究院' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2018年',
                value: [250, 350],
                symbolSize: 30,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《气温评价等级》等27部气象国家标准',
                value: [650, 350],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    return (
                      '<div>' +
                      '发布时间：' +
                      '2018年7月' +
                      '<br>发布单位：' +
                      '中国气象局' +
                      '</div>'
                    )
                  }
                }
              },
              {
                name: '2014年',
                value: [250, 200],
                symbolSize: 30,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《国家应对气候变化规划(2014-2020年)》',
                value: [650, 200],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    return (
                      '<div>' +
                      '发布时间：' +
                      '2014年1月' +
                      '<br>发布单位：' +
                      '国务院' +
                      '</div>'
                    )
                  }
                }
              }
            ]
          },
          {
            name: '相关标准',
            type: 'effectScatter',
            coordinateSystem: 'cartesian2d',
            silent: true,
            rippleEffect: {
              brushType: 'stroke',
              scale: 1.7
            },
            itemStyle: {
              color: 'rgb(126, 230, 251, 0.9)'
            },
            data: [
              {
                value: [250, 850],
                symbolSize: 85
              },
              {
                value: [250, 650],
                symbolSize: 70
              },
              {
                value: [250, 500],
                symbolSize: 55
              },
              {
                value: [250, 350],
                symbolSize: 40
              },
              {
                value: [250, 200],
                symbolSize: 30
              }
            ]
          },
          {
            name: '相关标准',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              show: true,
              symbolSize: 10,
              symbol: 'triangle'
            },
            tooltip: {
              show: false
            },
            lineStyle: {
              curveness: 0.1,
              opacity: 0.2,
              color: new that.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgb(126, 230, 251, 0.9)'
                  },
                  {
                    offset: 1,
                    color: '#bee0ff'
                  }
                ],
                false
              ),
              width: 2
            },
            data: [
              {
                coords: [
                  [250, 700],
                  [250, 500]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 500],
                  [250, 300]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 300],
                  [250, 200]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 850],
                  [650, 850]
                ]
              },
              {
                coords: [
                  [250, 650],
                  [650, 650]
                ]
              },
              {
                coords: [
                  [250, 500],
                  [650, 500]
                ]
              },
              {
                coords: [
                  [250, 350],
                  [650, 350]
                ]
              },
              {
                coords: [
                  [250, 200],
                  [650, 200]
                ]
              }
            ]
          },
          {
            name: '法律法规',
            type: 'graph',
            draggable: false,
            coordinateSystem: 'cartesian2d',
            label: {
              show: true,
              position: 'right',
              fontSize: 20
            },
            itemStyle: {
              color: '#0695d5'
            },
            data: [
              {
                name: '2022年',
                value: [250, 700],
                symbolSize: 80,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《科技支撑碳达峰碳中和实施方案(2022—2030年)》',
                value: [650, 700],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '修订时间：' +
                      '2022年8月' +
                      '<br>发布机关：' +
                      '科技部、国家发展改革委、工业和信息化部等9部门' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '2015年',
                value: [250, 500],
                symbolSize: 60,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《应对气候变化法》',
                value: [650, 500],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '修订时间：' +
                      '2015年5月' +
                      '<br>发布机构：国务院' +
                      '</div>'
                    return tipHtml
                  }
                }
              },
              {
                name: '1992年',
                value: [250, 300],
                symbolSize: 40,
                label: {
                  position: 'left',
                  offset: [-30, 0]
                }
              },
              {
                name: '《联合国气候变化框架公约》',
                value: [650, 300],
                symbolSize: 20,
                tooltip: {
                  show: true,
                  padding: 10,
                  formatter: function () {
                    var tipHtml = ''
                    tipHtml =
                      '<div>' +
                      '修订时间：' +
                      '1992年5月' +
                      '<br>发布机构：联合国' +
                      '</div>'
                    return tipHtml
                  }
                }
              }
            ]
          },
          {
            name: '法律法规',
            type: 'effectScatter',
            coordinateSystem: 'cartesian2d',
            silent: true,
            rippleEffect: {
              brushType: 'stroke',
              scale: 1.7
            },
            itemStyle: {
              color: '#0695d5'
            },
            data: [
              {
                value: [250, 700],
                symbolSize: 80
              },
              {
                value: [250, 500],
                symbolSize: 60
              },
              {
                value: [250, 300],
                symbolSize: 40
              }
            ]
          },
          {
            name: '法律法规',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              show: true,
              symbolSize: 10,
              symbol: 'triangle'
            },
            tooltip: {
              show: false
            },
            lineStyle: {
              curveness: 0.1,
              opacity: 0.2,
              color: new that.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#58B3CC'
                  },
                  {
                    offset: 1,
                    color: '#bee0ff'
                  }
                ],
                false
              ),
              width: 2
            },
            data: [
              {
                coords: [
                  [250, 700],
                  [250, 500]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 500],
                  [250, 300]
                ],
                lineStyle: { curveness: 0 }
              },
              {
                coords: [
                  [250, 700],
                  [650, 700]
                ]
              },
              {
                coords: [
                  [250, 500],
                  [650, 500]
                ]
              },
              {
                coords: [
                  [250, 300],
                  [650, 300]
                ]
              }
            ]
          }
        ],
        animationDuration: 5000,
        animationDelay: 500
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.policy-chart {
  position: relative;
  z-index: 999;
}
</style>
